﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../fly/fly-comment.js" type="text/javascript"></script>
    <script src="../../fly.ui.js" type="text/javascript"></script>
    <script src="../../plugins/grid/grid.js" type="text/javascript"></script>
    <script src="../../plugins/pager/pager.js" type="text/javascript"></script>

    <link href="../../plugins/themes/blue/fly-base.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/blue/button.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/blue/grid.css" rel="stylesheet" type="text/css" />

    <link href="../../plugins/themes/blue/toolbar.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/blue/pager.css" rel="stylesheet" type="text/css" />
    <script>
        $(function () {

            //create store
            var store = new $.data.AjaxStore({
                url: "data.json.page{pageIndex}.txt?id={0}&name={name}",
                method: "get",
                recordsProperty: 'rows',
                totalProperty:'recordCount',
                remoteSort:true,
                params: {
                    p1: "{1}",
                    p2:3
                }
            });

            store.onRequested(function (data) {
                data.rows[parseInt(Math.random() * 10)].leaf = false
                data.rows[parseInt(Math.random() * 10)].leaf = false
            });

            var pager = new $.ui.Pager({
                //css: "f-pager-pageList-button-rect",
                //currentType: $.ui.Pager.currentTypes.pageList,
                showNextButton: false,
                showPreviousButton: false,
                showButtonText: true
                //, showInfo: false
            });

            //create grid
            var panel = new $.ui.grid.GridPanel({
                id: 'panel',
                store: store,
                altRowBy: 3,
                width: 800,
                height: 400,
                plugins: new $.ui.grid.TreeGridPlugin({
                    parentCascade: true,
                    childCascade: true
                }),
                columns: [
                new $.ui.grid.RowNumberer({
                    format: "{0}.",
                    width: 150
                }),
                new $.ui.grid.CheckboxSelectionModel(),
                {
                    dataIndex: 0,
                    width: 40
                },
                {
                    dataIndex: 1
                }, 2, 3, 4],
                bbar: pager
            })
            panel.render(document.body)
        })
    </script>
    <style>            
            body
            {
            	background-image:url(../../plugins/themes/images/bgs.png);
            	background-repeat:repeat-x;
            	background-position:center bottom;
            	height:1000px;
            	color:#222222;
            	font-size:12px;
            	font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;
            }
   
    </style>
</head>
<body>
    

</body>
</html>
